<template>
  <div v-loading="loading">
    <el-card v-if="questions !== null" >
      <div slot="header" class="clearfix">
        <span style="float: left">考试 2022年1月19日18:25:47</span>
        <el-button style="margin-left: auto" type="primary" plain @click="">检查答案</el-button>
      </div>

      <div v-if="exam_type === 1">
        <el-card class="box-card question" shadow="hover" v-for="(item,index) of questions" :key="index">
          <div class="question">
            <el-row >
              <el-col :xs="4" :sm="3" :md="3" :lg="2" :xl="2">
                <el-link :underline="false">问题难度</el-link>
              </el-col>
              <el-col :xs="6" :sm="6" :md="6" :lg="3" :xl="2">
                <el-rate
                        v-model="item.degree"
                        :colors="colors"
                        disabled>
                </el-rate>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="2" :xl="2" :offset="3">
                <el-link :underline="false">分值:{{ item.score }}分</el-link>
              </el-col>
            </el-row>
            <el-row>
              <el-link :underline="false">{{ item.question_title }}</el-link>
            </el-row>

            <el-row :gutter="5">
              <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
                <el-radio-group v-model="item.answer" class="question-text">
                  <el-radio-button label="A">{{ item.question_a}}</el-radio-button>
                  <el-radio-button label="B">{{ item.question_b }}</el-radio-button>
                  <el-radio-button label="C">{{ item.question_c }}</el-radio-button>
                  <el-radio-button label="D">{{ item.question_d }}</el-radio-button>
                </el-radio-group>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <div v-if="exam_type === 2">
        <p>判断题</p>
      </div>
      <div v-if="exam_type === 3">
        <el-card class="box-card question" shadow="hover" v-for="(item,index) of questions" :key="index">
          <div class="question">
            <el-row >
              <el-col :xs="4" :sm="3" :md="3" :lg="2" :xl="2">
                <el-link :underline="false">问题难度</el-link>
              </el-col>
              <el-col :xs="6" :sm="6" :md="6" :lg="3" :xl="2">
                <el-rate
                        v-model="item.degree"
                        :colors="colors"
                        disabled>
                </el-rate>
              </el-col>
              <el-col :xs="5" :sm="5" :md="5" :lg="2" :xl="2" :offset="3">
                <el-link :underline="false">分值:{{ item.score }}分</el-link>
              </el-col>
            </el-row>
            <el-row>
              <el-link :underline="false">{{ item.question_title }}</el-link>
            </el-row>

            <el-row :gutter="5">
              <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
                <el-input
                        style="width: 700px"
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="item.answer">
                </el-input>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>


      <el-row type="flex" justify="center" align="middle">
        <el-button type="success" plain>重置</el-button>
        <el-button type="primary" @click="handleSubmit()" plain>提交</el-button>
      </el-row>

    </el-card>

    <el-card v-if="questions === null" >
      <div slot="header" class="clearfix">
        <span style="float: left"></span>
        <el-button style="margin-left: auto" type="primary" plain @click="">返回</el-button>
      </div>

      <div style="height: 300px;line-height: 300px;text-align: center">
        <el-link :underline="false" style="font-size: 20px;font-weight: 500;">当前没有考试，请先开始考试!</el-link>
      </div>
    </el-card>

  </div>

</template>


<script>
    export default {
      name: "exam",
      data() {
          return{
            loading : true,
            exam_type : 0,

            slider : 0,
            rate : 0,
            //dialogVisible : false,
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            questions : {},
          }
      },
      methods : {
        initData(page){
          this.$axios({
            method : "GET",
            url:"/user?method=getExam&currentPage=" + page,
          }).then((response)=>{
            console.log(response.data)
            if (response.data !== null){
              this.exam_type = response.data.pop();//删除数组最后一个元素，代表本次考试的类型
              console.log("exam_type =",this.exam_type)
            }
            this.questions = response.data;
            this.loading = false;
          }).catch((error)=> {
            this.$notify({title: '错误', message: '获取考试失败' + error, type: 'error'});
          });
        },
        handleCurrentChange(currentPage){//处理分页数据
          this.initData(currentPage)
        },
        handleSubmit() {
          console.log(this.questions)
          let newData = []
          this.questions.map(i => {
            newData.push(Object.assign({}, {question_id: i.question_id, answer: i.answer}))
          })
          this.$axios({
            method : "POST",
            url:"/user?method=submitExam",
            data : {
              questions : newData,
            },
          }).then((response)=>{
            console.log(response.data)
            if (response.data === true){
              this.$message({message: '提交考试成功', type: 'success',offset: 150});
              this.$router.push({path: '/user/info'});
            }else {
              this.$message({message: '提交考试失败', type: 'error',offset: 150});
            }
          }).catch((error)=> {
            this.$message({message: '提交考试失败，接口错误' + error, type: 'error',offset: 150});
          });
        },
      },
      beforeMount (){//初始化数据
        this.initData(1);
      },
      mounted() {
      },
    }
</script>

<style scoped>
  [v-clock]{
    display: none;
  }
  .el-row{
    margin: 10px 0;
  }
  .question{
    margin: 20px 0;
  }
  .question a,span{
    font-size: 20px;
    font-weight: 500;
  }
  .question-text span{
    font-size: 20px;
    font-weight: 500;
  }

  .el-card__header{
    background-color: rgba(0,0,0,.03);
  }
  .el-card__body{
    padding-top: 0;
  }
  .clearfix{
    display: flex;
    align-items: center;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
